<template>
  <div class="page">
    <div class="header">
      <i class="mui-icon mui-icon-arrowleft return-icon"
         aria-hidden="true" @click="$router.back(-1)"></i>
      <span class="header-title">职场官-为企业保驾护航</span>
    </div>
    <div class="content">
      <div class="qr-code">
        <img :src="shareInfo.qrcode" style="width: 40vw;z-index: 10">
      </div>
      <div class="share-info">
        已成功分享<span class="share-info-count">{{shareInfo.invite_number}}</span>人，收益：<span class="share-info-count">{{shareInfo.wallet}}</span>元
      </div>
      <a class="btn-check-share-info-detail" @click="checkDetail()">查看我的收益</a>
      <div class="share-notify">
        <!--<span>邀请好友 提升收益</span>-->
        <!--<br>-->
        <span>1、每邀请1名好友通过二维码注册成功，可获得收益0.5元。</span>
        <br>
        <span>2、邀请的好友查询成功，可获得30%提成。</span>
        <br>
        <span>3、升级为职场官推广员享受收益翻番，成为推广员请加客服微信：zhichangguan2018。</span>
      </div>
    </div>
  </div>
</template>

<script>
  // import hex_sha1 from '@/js/sha1'

  export default {

    data() {
      return {
        shareInfo: {
          qrcode: '',
          invite_number: '',
          wallet: '',
        },
      };
    },
    created() {
      // this.initWxConfig();
      this.getShareInfo();
    },
    methods: {
      // initWxConfig() {  //配置wx.config
      //   $.ajax({
      //     type: "get",
      //     url: "http://www.hrgsxt.cn/api/Share/shareWx",
      //     cache: false,
      //     dataType: "json",
      //     success: response => {
      //
      //       console.log('response', response);
      //       if (response.code === 200) {
      //         wx.config({
      //           debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      //           appId: 'wxc1016fb26f10cbf0', // 必填，公众号的唯一标识
      //           timestamp: response.data.timestamp, // 必填，生成签名的时间戳
      //           nonceStr: response.data.nonceStr, // 必填，生成签名的随机串
      //           signature: response.data.signature,// 必填，签名
      //           jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
      //         });
      //       }
      //     }
      //   });
      // },
      checkDetail() {
        this.$router.push('/myspread');
      },
      getShareInfo() { //获取推广码和和链接
        this.$http.get('api/User_spread/index').then(response => {
          if (response.code == 200) {
            this.shareInfo = response.data;
          }
        });
      },
      share() {
        wx.updateAppMessageShareData({
          title: '这是标题', // 分享标题
          desc: '这是分享', // 分享描述
          link: 'http://www.hrgsxt.cn/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.qrcode.qrcode, // 分享图标
        }, function (res) {
          alert('这是分享的回调函数');
          //这里是回调函数
        });
      }
    },

  };
</script>

<style>
  .page {
    height: 100vh;
    background-color: #1e80f8;
  }

  .header {
    height: 7%;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: white;
    line-height: .88rem;
  }

  .return-icon {
    float: left;
    margin-left: 0.15rem;
    line-height: .88rem;
  }

  .content {
    line-height: .88rem;
    height: 93%;
    background: url('../../../static/imgs/share-background.png') no-repeat fixed top;
    background-size: contain;
    position: relative;
    width: 100vw;
    text-align: center;
  }

  .qr-code {
    padding-top: 2rem;
  }

  .share-info {
    margin-top: 0.3rem;
    color: white;

    font-size: 0.3rem;
    line-height: 0.4rem
  }

  .share-info-count {
    color: #fed732
  }

  .btn-check-share-info-detail {

    margin-top: 0.2rem;
    font-size: 0.35rem;
    color: #fed732;
    z-index: 5;
  }

  .share-notify {

    text-align: left;
    color: white;
    font-size: 0.2rem;
    line-height: 0.3rem;
    margin: 0.8rem 0.4rem 0;
  }
</style>
